<template>
    <div class="account-edit">
        <!-- 银行名称 -->
        <div class="list-item after-line normal-text white-bg">
            <span class="list-item-left">开户银行（具体）</span>
            <div class="list-item-content">
                <input v-model.trim="form.bankName" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <!-- 银行卡号 -->
        <div class="list-item after-line normal-text white-bg">
            <span class="list-item-left">银行卡号</span>
            <div class="list-item-content">
                <input v-model.trim="form.no" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <!-- 开户名 -->
        <div class="list-item after-line normal-text white-bg">
            <span class="list-item-left">开户名</span>
            <div class="list-item-content">
                <input v-model.trim="form.name" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>

        <div class="hint text-small">
            提示：请输入本人实名认证/绑定身份证的卡号
        </div>

        <div class="account-edit__btn-wrap">
            <MobileButton name="gold-black" class="account-edit__btn" @click="onClickSave">保存信息</MobileButton>
        </div>
    </div>
</template>

<script lang="ts">
import { checkValidate, ValidateRule } from '@/lib/script/validate';
import { ShowRdata } from '@/mixins/showRdata';
import store from '@/store';
import { Component, Mixins, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'AccountEdit',
})
export default class AccountEdit extends Mixins(ShowRdata) {
    public form = {
        bankName: '',
        name: '',
        no: '',
    };
    public rules: { [key: string]: ValidateRule[] } = {
        bankName: [
            { required: true, message: '请填写开户银行(具体)' },
        ],
        name: [
            { required: true, message: '请填写开户人' },
        ],
        no: [
            { required: true, message: '请填写银行卡号' },
        ],
    };

    /** 账户id */
    public get accountId() {
        return this.$route.params.accountId;
    }
    /** 银行账户 */
    public get bankAccount() {
        return store.state.user.bankAccount;
    }

    /**
     * 点击保存
     */
    public async onClickSave() {
        const keys = Object.keys(this.rules);
        for (const key of keys) {
            const fail = checkValidate(this.form[key], this.rules[key]);
            if (fail) {
                wx.showToast({
                    title: fail.message,
                    icon: 'none',
                });
                return;
            }
        }

        store.commit('utils/startRequest');
        const rdata = await store.dispatch('user/updateBankAccount', {
            id: this.accountId,
            bank: this.form.bankName,
            name: this.form.name,
            no: this.form.no,
        });
        store.commit('utils/endRequest');

        this.showRdata(rdata);
        wx.navigateBack();
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('user/getBankAccount');
        store.commit('utils/endRequest');
        next();
    }
    public created() {
        if (this.accountId) {
            const account = this.bankAccount.find((account) => account.id === Number(this.accountId));
            if (account) {
                this.form.bankName = account.bank_name;
                this.form.name = account.name;
                this.form.no = account.no;
            }
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.account-edit {
    .list-item {
        padding: 15px 20px;
        .list-item-left {
            line-height: 52rpx;
        }
    }
    .hint {
        padding: 12px 12px 10px;
    }
    &__btn-wrap {
        padding-top: 30px;
        text-align: center;
        .btn {
            min-width: 198px;
            padding: 5px 0;
            .text-normal();
            border-radius: 8px;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
        }
    }
}
</style>
